<template>
  <div>
    <el-card class="leftCard">
      <h1>Hello</h1>
      <img src="../../assets/logo.png"
           alt="">
      <h3>Admin</h3>
      <span>
        对所学知识内容的兴趣可能成为学习动机。
        <br>
        <br>
        ——苏霍姆林斯基
      </span>
    </el-card>

    <el-card class="rightCard">
      <span>个人信息</span>
      <div class="info">
        <span>用户名: </span>
        <el-input></el-input><br>
        <span>密码: </span>
        <el-input v-model="input"></el-input><br>
        <span>联系方式: </span>
        <el-input v-model="input"></el-input><br>
      </div>
    </el-card>
  </div>
  

</template>

<script>
export default {
  name: 'Personal'
}
</script>

<style scoped>
.leftCard {
  float: left;
  width: 450px;
  height: 800px;
  margin-top: 45px;
}

.rightCard {
  float: right;
  width: 1200px;
  height: 800px;
}

.el-card {
  text-align: center;
}

.el-card h1 {
  font-size: 40px;
}

.el-card img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.el-card h3 {
  font-size: 20px;
  margin-bottom: 200px;
  margin-top: 50px;
}

.rightCard span {
  font-size: 30px;
  margin-top: 20px;
  clear: both;
}

.rightCard .info span {
  font-size: 20px;
}

.info .el-input {
  width: 250px;
  height: 50px;
}
</style>